<div class="col-sm-4 col-xs-6">
  <div class="product" ng-class="product.class || 'product-normal'">

    <!-- HEADING -->
    <div class="product-heading">
      <p>Chance</p>
      <h6>{{product.percentage + '%'}}</h6>
    </div>
    <hr class="product-hr">

    <!-- CONTENT -->
    <div class="product-content">
      <ul>
        <li>{{'Odds: ' + product.odds}}</li>
        <li>{{'Sales limit: ' + product.salesLimit}}</li>
        <li>Information: half and full</li>
        <li>{{'Play Time: ' + product.playTime}}</li>
      </ul>
    </div>
    <hr class="product-hr">

    <!-- FOOTER -->
    <div class="product-footer">
      <p>Information delivery method:</p>
      <p class="info-delivery-method">By {{product.informationType}}</p>
      <p class="product-price">Price: {{product.price | currency : '\u20AC'}}</p>
      <button type="button" class="btn btn-primary product-purchase-btn">Purchase</button>
    </div>
  </div>
</div>